<template>
  <div class="flex-1 overflow-hidden flex flex-col">
    <!-- 标签切换（固定） -->
    <div class="bg-white/95 backdrop-blur-sm border-b border-gray-200/50 p-3 sticky top-0 z-10">
      <div class="flex space-x-1">
        <button 
          v-for="tab in tabs"
          :key="tab.key"
          @click="activeTab = tab.key"
          class="px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200"
          :class="activeTab === tab.key 
            ? 'bg-blue-500 text-white shadow-sm' 
            : 'text-gray-600 hover:bg-gray-100'"
        >
          <i :class="`fa ${tab.icon} mr-2`"></i>
          {{ tab.label }}
        </button>
      </div>
    </div>

    <!-- 题目详情（可滚动） -->
    <div class="flex-1 overflow-y-auto">
      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center items-center py-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
        <span class="ml-3 text-gray-600">加载中...</span>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="text-center py-12">
        <div class="text-red-500 mb-4">{{ error }}</div>
        <button @click="handleRetry" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
          重试
        </button>
      </div>

      <!-- 题目内容 -->
      <div v-else-if="question" class="p-4 space-y-4">
        <!-- 题目描述 -->
        <div v-if="activeTab === 'detail'" class="space-y-4">
          <div class="bg-white/90 p-4 rounded-lg border border-gray-200/50 shadow-sm">
            <h3 class="text-sm font-semibold mb-3 text-gray-800 flex items-center">
              <svg class="w-4 h-4 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
              题目描述
            </h3>
            <div class="prose prose-sm max-w-none" v-html="question.content"></div>
          </div>

          <!-- 输入格式 -->
          <div v-if="question.input_format" class="bg-white/90 p-4 rounded-lg border border-gray-200/50 shadow-sm">
            <h3 class="text-sm font-semibold mb-3 text-gray-800 flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
              输入格式
            </h3>
            <div class="prose prose-sm max-w-none" v-html="question.input_format"></div>
          </div>

          <!-- 输出格式 -->
          <div v-if="question.output_format" class="bg-white/90 p-4 rounded-lg border border-gray-200/50 shadow-sm">
            <h3 class="text-sm font-semibold mb-3 text-gray-800 flex items-center">
              <svg class="w-4 h-4 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
              输出格式
            </h3>
            <div class="prose prose-sm max-w-none" v-html="question.output_format"></div>
          </div>

          <!-- 约束条件 -->
          <div v-if="question.constraints" class="bg-white/90 p-4 rounded-lg border border-gray-200/50 shadow-sm">
            <h3 class="text-sm font-semibold mb-3 text-gray-800 flex items-center">
              <svg class="w-4 h-4 mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
              </svg>
              约束条件
            </h3>
            <div class="prose prose-sm max-w-none" v-html="question.constraints"></div>
          </div>

          <!-- 样例 -->
          <div v-if="question.sample_input || question.sample_output" class="bg-white/90 p-4 rounded-lg border border-gray-200/50 shadow-sm">
            <h3 class="text-sm font-semibold mb-3 text-gray-800 flex items-center">
              <svg class="w-4 h-4 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
              </svg>
              样例
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div v-if="question.sample_input">
                <h4 class="text-xs font-semibold text-gray-600 mb-2">输入</h4>
                <pre class="bg-gray-100 p-3 rounded text-sm font-mono overflow-x-auto">{{ question.sample_input }}</pre>
              </div>
              <div v-if="question.sample_output">
                <h4 class="text-xs font-semibold text-gray-600 mb-2">输出</h4>
                <pre class="bg-gray-100 p-3 rounded text-sm font-mono overflow-x-auto">{{ question.sample_output }}</pre>
              </div>
            </div>
          </div>
        </div>

        <!-- 题解 -->
        <div v-else-if="activeTab === 'solution'" class="space-y-4">
          <div v-if="solutions.length > 0" class="space-y-4">
            <div 
              v-for="solution in solutions" 
              :key="solution.id"
              class="bg-white/90 p-4 rounded-lg border border-gray-200/50 shadow-sm"
            >
              <div class="flex items-center justify-between mb-3">
                <div class="flex items-center space-x-2">
                  <img 
                    :src="getAvatarUrl(solution.author.id, solution.author.avatar_url)" 
                    :alt="solution.author.username"
                    class="w-6 h-6 rounded-full"
                  >
                  <span class="text-sm font-medium text-gray-700">{{ solution.author.username }}</span>
                  <span class="text-xs text-gray-500">{{ formatTime(solution.created_at) }}</span>
                </div>
                <div class="flex items-center space-x-2">
                  <span class="text-xs text-gray-500">{{ solution.like_count }} 赞</span>
                  <button class="text-gray-400 hover:text-red-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="prose prose-sm max-w-none" v-html="solution.content"></div>
            </div>
          </div>
          <div v-else class="text-center py-8">
            <div class="text-gray-400 text-sm">暂无题解</div>
          </div>
        </div>

        <!-- 讨论 -->
        <div v-else-if="activeTab === 'discussion'" class="space-y-4">
          <div v-if="discussions.length > 0" class="space-y-4">
            <div 
              v-for="discussion in discussions" 
              :key="discussion.id"
              class="bg-white/90 p-4 rounded-lg border border-gray-200/50 shadow-sm"
            >
              <div class="flex items-center justify-between mb-3">
                <div class="flex items-center space-x-2">
                  <img 
                    :src="getAvatarUrl(discussion.author.id, discussion.author.avatar_url)" 
                    :alt="discussion.author.username"
                    class="w-6 h-6 rounded-full"
                  >
                  <span class="text-sm font-medium text-gray-700">{{ discussion.author.username }}</span>
                  <span class="text-xs text-gray-500">{{ formatTime(discussion.created_at) }}</span>
                </div>
                <div class="flex items-center space-x-2">
                  <span class="text-xs text-gray-500">{{ discussion.reply_count }} 回复</span>
                </div>
              </div>
              <h4 class="text-sm font-semibold text-gray-800 mb-2">{{ discussion.title }}</h4>
              <div class="prose prose-sm max-w-none" v-html="discussion.content"></div>
            </div>
          </div>
          <div v-else class="text-center py-8">
            <div class="text-gray-400 text-sm">暂无讨论</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Question } from '@/types'
import { getAvatarUrl } from '@/utils'

interface Props {
  question: Question | null
  loading: boolean
  error: string
  solutions: Array<{
    id: number
    content: string
    like_count: number
    author: {
      id: number
      username: string
      avatar_url: string
    }
    created_at: string
  }>
  discussions: Array<{
    id: number
    title: string
    content: string
    reply_count: number
    author: {
      id: number
      username: string
      avatar_url: string
    }
    created_at: string
  }>
}

const props = defineProps<Props>()

const emit = defineEmits<{
  retry: []
}>()

const activeTab = ref('detail')

const tabs = [
  { key: 'detail', label: '题目详情', icon: 'fa-file-text' },
  { key: 'solution', label: '题解', icon: 'fa-lightbulb' },
  { key: 'discussion', label: '讨论', icon: 'fa-comments' }
]

const handleRetry = () => {
  emit('retry')
}

const formatTime = (timeStr: string) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  if (diff < 60000) {
    return '刚刚'
  } else if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return date.toLocaleDateString()
  }
}
</script>

